<template>
  <div>
    <div class="search">
      <a-form-model layout="inline"
                    :model="pageQuery.queryParam"
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 14 }">
        <div>
          <a-button type="primary"
                    @click="batchGenerator">
            <a-icon type="plus" />
            批量生成
          </a-button>
        </div>
        <a-form-model-item label="表名称"
                           labelAlign="left"
                           prop="tableName">
          <a-input v-model="pageQuery.queryParam.tableName" />
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary"
                    @click="query">查询</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
    <a-table rowKey="tableName"
             :row-selection=" { selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
             :columns="columns"
             :pagination="pageQuery"
             :data-source="data"
             @change="onChange">
      <span slot="time"
            slot-scope="time">
        {{time|formatTimer}}</span>
      <span slot="operation"
            slot-scope="item">
        <a-button @click="generator(item)"
                  type="primary">代码生成</a-button>
      </span>
    </a-table>
  </div>
</template>
<script>
const columns = [
  { title: '表名', dataIndex: 'tableName', key: 'tableName' },
  { title: '创建时间', dataIndex: 'createTime', key: 'createTime', scopedSlots: { customRender: 'time' } },
  { title: '更新时间', dataIndex: 'updateTime', key: 'updateTime', scopedSlots: { customRender: 'time' } },
  { title: '备注', dataIndex: 'tableComment', key: 'tableComment', scopedSlots: { customRender: 'tableComment' } },
  { title: '操作', key: 'operation', scopedSlots: { customRender: 'operation' } },
];
import { dataPage, dataGenerator } from '@a/generator'
import { formatTimer } from '@u/utils'
export default {
  data () {
    return {
      pageQuery: {
        showSizeChanger: true,
        hideOnSinglePage: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '50', '100'],
        total: 0,
        current: 1,
        defaultCurrent: 1,
        pageSize: 10,
        queryParam: {
          tableName: null
        }
      },
      data: [],
      columns,
      selectedRowKeys: []
    };
  },
  created () {
    this.query()
  },
  methods: {
    onChange (pageQuery) {
      this.pageQuery = pageQuery;
      this.query()
    },
    query () {
      dataPage(this.pageQuery).then(res => {
        if (res.code === 200) {
          this.data = res.data.records
          this.pageQuery.total = res.data.total
        }
      })
    },
    generator (item) {
      let formData = new FormData();
      formData.append("tableNames", [item.tableName])
      this.generatorApi(formData)
    },
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    batchGenerator () {
      if (this.selectedRowKeys.length === 0) {
        this.$message.error("请选择需要代码生成的表！");
        return
      }
      let formData = new FormData();
      formData.append("tableNames", this.selectedRowKeys)
      this.generatorApi(formData)
    },
    generatorApi (formData) {
      dataGenerator(formData).then(res => {
        if (res.code === 200) {
          this.$message.success("代码生成成功！");
          this.selectedRowKeys = []
        } else {
          this.$message.error(res.msg);
        }
      })
    }
  },
  filters: {
    formatTimer
  },
};
</script>
<style>
.search .ant-form {
  padding: 10px 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>